<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人网站 | 微软金牌前端工程师</title>
    <!-- CDN引入 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/chart.js@4.3.0/dist/chart.umd.min.js" rel="stylesheet">
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav id="mainNav" class="navbar navbar-expand-lg navbar-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">
                <span class="logo-text">个人网站</span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <i class="fa fa-bars"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a class="nav-link" href="#hero">首页</a></li>
                    <li class="nav-item"><a class="nav-link" href="#about">关于我</a></li>
                    <li class="nav-item"><a class="nav-link" href="#skills">技能</a></li>
                    <li class="nav-item"><a class="nav-link" href="#projects">项目</a></li>
                    <li class="nav-item"><a class="nav-link" href="#experience">经验</a></li>
                    <li class="nav-item"><a class="nav-link" href="#contact">联系我</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 英雄区域 -->
    <header id="hero" class="hero-section">
        <div class="container h-100">
            <div class="row h-100 align-items-center">
                <div class="col-12 text-center">
                    <div class="animated-text">
                        <h1 class="display-1 mb-4">你好，我是 <span class="text-primary">李明</span></h1>
                        <p class="lead mb-6">微软金牌前端工程师 | 全栈开发专家 | UI/UX设计师</p>
                        <div class="d-flex justify-content-center gap-4">
                            <a href="#projects" class="btn btn-primary btn-lg btn-custom">查看作品</a>
                            <a href="#contact" class="btn btn-outline-light btn-lg btn-custom">联系我</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="scroll-down">
            <a href="#about"><i class="fa fa-angle-down"></i></a>
        </div>
    </header>

    <!-- 关于我 -->
    <section id="about" class="about-section py-20 bg-light">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center mb-12">
                    <h2 class="section-heading text-uppercase">关于我</h2>
                    <div class="section-divider mx-auto"></div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <div class="about-image">
                        <img src="https://via.placeholder.com/600x700" alt="个人照片" class="img-fluid rounded-lg shadow-lg">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="about-content">
                        <h3 class="mb-4">微软金牌前端工程师</h3>
                        <p class="mb-4">我是一位拥有10年经验的前端开发专家，专注于创建高性能、用户友好的Web应用。我曾在多家知名企业担任技术负责人，带领团队完成了众多大型项目。</p>
                        <p class="mb-4">我精通现代前端技术栈，包括但不限于React、Vue、Angular等框架，同时也擅长UI/UX设计和后端开发，是一位全栈型人才。</p>
                        <p class="mb-6">作为微软认证的金牌开发者，我始终保持学习新技术的热情，不断追求卓越，为客户提供最佳的技术解决方案。</p>
                        <div class="personal-info">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <span class="info-label">姓名:</span>
                                    <span class="info-value">李明</span>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <span class="info-label">职位:</span>
                                    <span class="info-value">高级前端工程师</span>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <span class="info-label">邮箱:</span>
                                    <span class="info-value">liming@example.com</span>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <span class="info-label">电话:</span>
                                    <span class="info-value">138****1234</span>
                                </div>
                            </div>
                        </div>
                        <div class="social-links mt-6">
                            <a href="#" class="social-icon" target="_blank"><i class="fa fa-github"></i></a>
                            <a href="#" class="social-icon" target="_blank"><i class="fa fa-linkedin"></i></a>
                            <a href="#" class="social-icon" target="_blank"><i class="fa fa-twitter"></i></a>
                            <a href="#" class="social-icon" target="_blank"><i class="fa fa-weixin"></i></a>
                        </div>
                        <div class="mt-6">
                            <a href="#" class="btn btn-primary btn-download" download>下载简历</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 技能 -->
    <section id="skills" class="skills-section py-20">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center mb-12">
                    <h2 class="section-heading text-uppercase">专业技能</h2>
                    <div class="section-divider mx-auto"></div>
                    <p class="section-subtitle mt-4">精通现代Web开发技术栈，擅长创建高性能、可扩展的应用程序</p>
                </div>
            </div>
            
            <!-- 技能图表 -->
            <div class="row mb-12">
                <div class="col-lg-8 mx-auto">
                    <div class="chart-container">
                        <canvas id="skillsChart"></canvas>
                    </div>
                </div>
            </div>
            
            <!-- 技能卡片 -->
            <div class="row">
                <div class="col-lg-3 col-md-6 mb-6">
                    <div class="skill-card h-100">
                        <div class="skill-icon"><i class="fa fa-code"></i></div>
                        <h4 class="skill-title">前端开发</h4>
                        <p class="skill-description">精通HTML5、CSS3、JavaScript，熟悉各种现代前端框架和库。</p>
                        <div class="skill-level">
                            <div class="level-bar">
                                <div class="level-progress" style="width: 95%;"></div>
                            </div>
                            <span class="level-text">95%</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 mb-6">
                    <div class="skill-card h-100">
                        <div class="skill-icon"><i class="fa fa-mobile"></i></div>
                        <h4 class="skill-title">响应式设计</h4>
                        <p class="skill-description">专注于创建在各种设备上都能完美呈现的响应式界面。</p>
                        <div class="skill-level">
                            <div class="level-bar">
                                <div class="level-progress" style="width: 90%;"></div>
                            </div>
                            <span class="level-text">90%</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 mb-6">
                    <div class="skill-card h-100">
                        <div class="skill-icon"><i class="fa fa-database"></i></div>
                        <h4 class="skill-title">后端开发</h4>
                        <p class="skill-description">熟悉Node.js、Express等后端技术，能够构建完整的Web应用。</p>
                        <div class="skill-level">
                            <div class="level-bar">
                                <div class="level-progress" style="width: 85%;"></div>
                            </div>
                            <span class="level-text">85%</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 mb-6">
                    <div class="skill-card h-100">
                        <div class="skill-icon"><i class="fa fa-paint-brush"></i></div>
                        <h4 class="skill-title">UI/UX设计</h4>
                        <p class="skill-description">具备良好的设计感，能够创建美观且用户友好的界面。</p>
                        <div class="skill-level">
                            <div class="level-bar">
                                <div class="level-progress" style="width: 88%;"></div>
                            </div>
                            <span class="level-text">88%</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 项目 -->
    <section id="projects" class="projects-section py-20 bg-light">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center mb-12">
                    <h2 class="section-heading text-uppercase">精选项目</h2>
                    <div class="section-divider mx-auto"></div>
                    <p class="section-subtitle mt-4">展示我参与开发的一些具有代表性的项目</p>
                </div>
            </div>
            
            <!-- 项目过滤器 -->
            <div class="row mb-8">
                <div class="col-lg-12 text-center">
                    <div class="project-filters">
                        <button class="filter-btn active" data-filter="all">全部</button>
                        <button class="filter-btn" data-filter="web">Web应用</button>
                        <button class="filter-btn" data-filter="mobile">移动应用</button>
                        <button class="filter-btn" data-filter="ecommerce">电子商务</button>
                    </div>
                </div>
            </div>
            
            <!-- 项目网格 -->
            <div class="row project-grid">
                <!-- 项目1 -->
                <div class="col-lg-4 col-md-6 mb-8 project-item" data-category="web">
                    <div class="project-card">
                        <div class="project-image">
                            <img src="https://via.placeholder.com/600x400" alt="项目1" class="img-fluid">
                            <div class="project-overlay">
                                <div class="project-info">
                                    <h4 class="project-title">企业管理系统</h4>
                                    <p class="project-description">基于React和Node.js开发的企业资源管理系统</p>
                                    <div class="project-links">
                                        <a href="#" class="project-link" target="_blank"><i class="fa fa-link"></i></a>
                                        <a href="#" class="project-link" target="_blank"><i class="fa fa-github"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="project-tags">
                            <span class="tag">React</span>
                            <span class="tag">Node.js</span>
                            <span class="tag">MongoDB</span>
                        </div>
                    </div>
                </div>
                
                <!-- 项目2 -->
                <div class="col-lg-4 col-md-6 mb-8 project-item" data-category="ecommerce">
                    <div class="project-card">
                        <div class="project-image">
                            <img src="https://via.placeholder.com/600x400" alt="项目2" class="img-fluid">
                            <div class="project-overlay">
                                <div class="project-info">
                                    <h4 class="project-title">电子商务平台</h4>
                                    <p class="project-description">高性能、可扩展的在线购物平台</p>
                                    <div class="project-links">
                                        <a href="#" class="project-link" target="_blank"><i class="fa fa-link"></i></a>
                                        <a href="#" class="project-link" target="_blank"><i class="fa fa-github"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="project-tags">
                            <span class="tag">Vue.js</span>
                            <span class="tag">Firebase</span>
                            <span class="tag">Stripe</span>
                        </div>
                    </div>
                </div>
                
                <!-- 项目3 -->
                <div class="col-lg-4 col-md-6 mb-8 project-item" data-category="mobile">
                    <div class="project-card">
                        <div class="project-image">
                            <img src="https://via.placeholder.com/600x400" alt="项目3" class="img-fluid">
                            <div class="project-overlay">
                                <div class="project-info">
                                    <h4 class="project-title">健康追踪应用</h4>
                                    <p class="project-description">基于React Native开发的跨平台健康管理应用</p>
                                    <div class="project-links">
                                        <a href="#" class="project-link" target="_blank"><i class="fa fa-link"></i></a>
                                        <a href="#" class="project-link" target="_blank"><i class="fa fa-github"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="project-tags">
                            <span class="tag">React Native</span>
                            <span class="tag">Redux</span>
                            <span class="tag">AWS</span>
                        </div>
                    </div>
                </div>
                
                <!-- 项目4 -->
                <div class="col-lg-4 col-md-6 mb-8 project-item" data-category="web">
                    <div class="project-card">
                        <div class="project-image">
                            <img src="https://via.placeholder.com/600x400" alt="项目4" class="img-fluid">
                            <div class="project-overlay">
                                <div class="project-info">
                                    <h4 class="project-title">数据分析仪表板</h4>
                                    <p class="project-description">实时数据可视化平台，支持多种图表类型</p>
                                    <div class="project-links">
                                        <a href="#" class="project-link" target="_blank"><i class="fa fa-link"></i></a>
                                        <a href="#" class="project-link" target="_blank"><i class="fa fa-github"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="project-tags">
                            <span class="tag">Angular</span>
                            <span class="tag">D3.js</span>
                            <span class="tag">Node.js</span>
                        </div>
                    </div>
                </div>
                
                <!-- 项目5 -->
                <div class="col-lg-4 col-md-6 mb-8 project-item" data-category="ecommerce">
                    <div class="project-card">
                        <div class="project-image">
                            <img src="https://via.placeholder.com/600x400" alt="项目5" class="img-fluid">
                            <div class="project-overlay">
                                <div class="project-info">
                                    <h4 class="project-title">食品配送平台</h4>
                                    <p class="project-description">高效的在线订餐和配送管理系统</p>
                                    <div class="project-links">
                                        <a href="#" class="project-link" target="_blank"><i class="fa fa-link"></i></a>
                                        <a href="#" class="project-link" target="_blank"><i class="fa fa-github"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="project-tags">
                            <span class="tag">React</span>
                            <span class="tag">GraphQL</span>
                            <span class="tag">Socket.io</span>
                        </div>
                    </div>
                </div>
                
                <!-- 项目6 -->
                <div class="col-lg-4 col-md-6 mb-8 project-item" data-category="mobile">
                    <div class="project-card">
                        <div class="project-image">
                            <img src="https://via.placeholder.com/600x400" alt="项目6" class="img-fluid">
                            <div class="project-overlay">
                                <div class="project-info">
                                    <h4 class="project-title">社交网络应用</h4>
                                    <p class="project-description">功能丰富的社交媒体应用，支持实时消息</p>
                                    <div class="project-links">
                                        <a href="#" class="project-link" target="_blank"><i class="fa fa-link"></i></a>
                                        <a href="#" class="project-link" target="_blank"><i class="fa fa-github"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="project-tags">
                            <span class="tag">Flutter</span>
                            <span class="tag">Firebase</span>
                            <span class="tag">WebSocket</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 经验 -->
    <section id="experience" class="experience-section py-20">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center mb-12">
                    <h2 class="section-heading text-uppercase">工作经验</h2>
                    <div class="section-divider mx-auto"></div>
                    <p class="section-subtitle mt-4">我的职业发展历程和重要成就</p>
                </div>
            </div>
            
            <!-- 时间线 -->
            <div class="row">
                <div class="col-lg-10 mx-auto">
                    <div class="timeline">
                        <!-- 经验1 -->
                        <div class="timeline-item">
                            <div class="timeline-icon"></div>
                            <div class="timeline-content">
                                <h4 class="timeline-title">高级前端工程师</h4>
                                <div class="timeline-company">微软 (Microsoft)</div>
                                <div class="timeline-date">2019年 - 至今</div>
                                <p class="timeline-description">
                                    作为前端技术负责人，领导团队开发和维护公司核心产品。优化前端架构，提升应用性能，降低维护成本。指导初级工程师，参与技术决策。
                                </p>
                                <div class="timeline-achievements">
                                    <ul>
                                        <li>重构了核心产品前端架构，提升性能30%</li>
                                        <li>建立了前端开发规范和最佳实践</li>
                                        <li>引入自动化测试，提高代码质量</li>
                                        <li>培训和指导团队成员，提升整体技术水平</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 经验2 -->
                        <div class="timeline-item">
                            <div class="timeline-icon"></div>
                            <div class="timeline-content">
                                <h4 class="timeline-title">前端开发工程师</h4>
                                <div class="timeline-company">阿里巴巴 (Alibaba)</div>
                                <div class="timeline-date">2016年 - 2019年</div>
                                <p class="timeline-description">
                                    参与电商平台的前端开发工作，负责开发用户界面和交互功能。优化用户体验，提高页面加载速度。
                                </p>
                                <div class="timeline-achievements">
                                    <ul>
                                        <li>开发了高性能的产品列表和详情页面</li>
                                        <li>实现了响应式设计，支持多设备访问</li>
                                        <li>优化了关键渲染路径，提升页面加载速度</li>
                                        <li>参与了多次大型促销活动的前端开发</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 经验3 -->
                        <div class="timeline-item">
                            <div class="timeline-icon"></div>
                            <div class="timeline-content">
                                <h4 class="timeline-title">Web开发工程师</h4>
                                <div class="timeline-company">腾讯 (Tencent)</div>
                                <div class="timeline-date">2013年 - 2016年</div>
                                <p class="timeline-description">
                                    参与公司多个Web项目的开发和维护工作，学习和应用最新的前端技术。
                                </p>
                                <div class="timeline-achievements">
                                    <ul>
                                        <li>参与开发了多个企业级Web应用</li>
                                        <li>学习和应用了React等现代前端框架</li>
                                        <li>提高了代码质量和开发效率</li>
                                        <li>积累了丰富的前端开发经验</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 教育背景 -->
            <div class="row mt-16">
                <div class="col-lg-12 text-center mb-8">
                    <h3 class="section-heading text-uppercase">教育背景</h3>
                    <div class="section-divider mx-auto"></div>
                </div>
                <div class="col-lg-10 mx-auto">
                    <div class="timeline">
                        <!-- 教育1 -->
                        <div class="timeline-item">
                            <div class="timeline-icon"></div>
                            <div class="timeline-content">
                                <h4 class="timeline-title">计算机科学与技术硕士</h4>
                                <div class="timeline-company">清华大学</div>
                                <div class="timeline-date">2011年 - 2013年</div>
                                <p class="timeline-description">
                                    专注于Web技术和用户界面设计的研究，发表了多篇学术论文。
                                </p>
                            </div>
                        </div>
                        
                        <!-- 教育2 -->
                        <div class="timeline-item">
                            <div class="timeline-icon"></div>
                            <div class="timeline-content">
                                <h4 class="timeline-title">软件工程学士</h4>
                                <div class="timeline-company">北京大学</div>
                                <div class="timeline-date">2007年 - 2011年</div>
                                <p class="timeline-description">
                                    主修软件工程，辅修计算机科学，获得优秀毕业生称号。
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系方式 -->
    <section id="contact" class="contact-section py-20 bg-light">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center mb-12">
                    <h2 class="section-heading text-uppercase">联系我</h2>
                    <div class="section-divider mx-auto"></div>
                    <p class="section-subtitle mt-4">如果您对我的作品感兴趣或有任何问题，请随时联系我</p>
                </div>
            </div>
            
            <div class="row">
                <div class="col-lg-6 mb-8">
                    <div class="contact-info">
                        <h3 class="contact-title mb-6">联系方式</h3>
                        <div class="contact-item mb-4">
                            <div class="contact-icon"><i class="fa fa-map-marker"></i></div>
                            <div class="contact-details">
                                <h4>地址</h4>
                                <p>北京市海淀区中关村大街1号</p>
                            </div>
                        </div>
                        <div class="contact-item mb-4">
                            <div class="contact-icon"><i class="fa fa-envelope"></i></div>
                            <div class="contact-details">
                                <h4>邮箱</h4>
                                <p>liming@example.com</p>
                            </div>
                        </div>
                        <div class="contact-item mb-4">
                            <div class="contact-icon"><i class="fa fa-phone"></i></div>
                            <div class="contact-details">
                                <h4>电话</h4>
                                <p>138****1234</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon"><i class="fa fa-clock-o"></i></div>
                            <div class="contact-details">
                                <h4>工作时间</h4>
                                <p>周一至周五: 9:00 - 18:00</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 社交媒体 -->
                    <div class="social-section mt-8">
                        <h3 class="social-title mb-4">关注我</h3>
                        <div class="social-links">
                            <a href="#" class="social-icon" target="_blank"><i class="fa fa-github"></i></a>
                            <a href="#" class="social-icon" target="_blank"><i class="fa fa-linkedin"></i></a>
                            <a href="#" class="social-icon" target="_blank"><i class="fa fa-twitter"></i></a>
                            <a href="#" class="social-icon" target="_blank"><i class="fa fa-weibo"></i></a>
                            <a href="#" class="social-icon" target="_blank"><i class="fa fa-weixin"></i></a>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="contact-form">
                        <h3 class="form-title mb-6">发送消息</h3>
                        <form id="contactForm">
                            <div class="form-group mb-4">
                                <label for="name">姓名</label>
                                <input type="text" class="form-control" id="name" placeholder="请输入您的姓名">
                            </div>
                            <div class="form-group mb-4">
                                <label for="email">邮箱</label>
                                <input type="email" class="form-control" id="email" placeholder="请输入您的邮箱">
                            </div>
                            <div class="form-group mb-4">
                                <label for="subject">主题</label>
                                <input type="text" class="form-control" id="subject" placeholder="请输入消息主题">
                            </div>
                            <div class="form-group mb-6">
                                <label for="message">消息</label>
                                <textarea class="form-control" id="message" rows="5" placeholder="请输入您的消息"></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary btn-submit">发送消息</button>
                        </form>
                        <div id="formResponse" class="mt-4 d-none"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer-section py-8 bg-dark text-white">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-md-6 mb-6">
                    <div class="footer-info">
                        <h4 class="footer-title">关于我</h4>
                        <p class="footer-description">
                            微软金牌前端工程师，专注于创建高性能、用户友好的Web应用。
                        </p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 mb-6">
                    <div class="footer-links">
                        <h4 class="footer-title">快速链接</h4>
                        <ul>
                            <li><a href="#hero">首页</a></li>
                            <li><a href="#about">关于我</a></li>
                            <li><a href="#skills">技能</a></li>
                            <li><a href="#projects">项目</a></li>
                            <li><a href="#experience">经验</a></li>
                            <li><a href="#contact">联系我</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-4 col-md-12">
                    <div class="footer-contact">
                        <h4 class="footer-title">联系方式</h4>
                        <ul>
                            <li><i class="fa fa-envelope"></i> liming@example.com</li>
                            <li><i class="fa fa-phone"></i> 138****1234</li>
                            <li><i class="fa fa-map-marker"></i> 北京市海淀区中关村大街1号</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="row mt-8">
                <div class="col-lg-12 text-center">
                    <div class="footer-copyright">
                        <p>&copy; 2023 个人网站. 保留所有权利.</p>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- 回到顶部按钮 -->
    <button id="backToTop" class="back-to-top">
        <i class="fa fa-angle-up"></i>
    </button>

    <!-- 引入JavaScript文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.3.0/dist/chart.umd.min.js"></script>
    <script src="scripts.js"></script>
</body>
</html>